<template>
  <div class="person">
    姓:<input type="text" v-model="firstName"><br>
    名:<input type="text" v-model="lastName"><br>
    全名:<span>{{fullName}}</span><br>
    全名:<span>{{fullName}}</span><br>
    全名:<span>{{fullName}}</span><br>
    全名:<span>{{fullName}}</span><br>
    全名:<span>{{fullName}}</span><br>
    全名:<span>{{fullName}}</span><br>
    全名:<span>{{fullName}}</span><br>
    全名:<span>{{fullName}}</span><br>
    全名:<span>{{fullName}}</span><br>
    全名:<span>{{fullName}}</span><br>
    <button @click="changeFullName">改全名</button>
  </div>
</template>

<script lang="ts" setup name="Person">  //生效需要引入外部插件import VueSetupExtend  from 'vite-plugin-vue-setup-extend'
/**
 * @author
 * 基本类型响应式数据必须用ref
 * 若需要永固一个响应式对象层级不深ref，reactive都可以
 * 若需要一个响应式对哦哦行,并且层级较深推荐实用reactive
 */
import {ref,reactive,toRefs,toRef,computed} from "vue";
let firstName=ref('zhang')
let lastName=ref('san')
function fullName2() {
  return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+lastName.value //调用多次

}
//定义fullName计算属性是只读的
// let fullName= computed(()=>{
//console.log(1)
//   return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+lastName.value //计算属性
// })

//可读可写的属性
let fullName=computed({
  get(){
    return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+lastName.value //计算属性
  },
  set(val){
// console.log('set',val)
    const [str1,str2]=val.split('-')
    firstName.value=str1
    lastName.value=str2
  }
})
function changeFullName() {

  fullName.value='star-wp'
}


</script>
<style>
button{
  margin: 5px;
}
body{
  background-color: pink;
}
li{
  font-size: 30px;
}
</style>